<template>
  <div>
    <el-tabs v-model="activeNav" @tab-click="handleNavChange">
      <el-tab-pane v-for="(item,index) in nav"
                   :name="item.name"
                   :label="item.label"
                   :key="item.name"
      ></el-tab-pane>
    </el-tabs>
    <Elevator
      :list="nav.map(i=>i.name)"
      height="calc(100vh - 54px - 55px - 55px - 40px)"
      ref="ElevatorRef"
      @showValue="showValue"
    >
      <template #itemBaseInfo>
        这里可以进行修改结果，可以打开控制台查看
        <CodeEdit
          v-model="jsChangeResult"
          language="javascript"
        ></CodeEdit>
      </template>
      <template #itemSort>
        结果
        <CodeHighlightjs language="js" :code="tableCode"/>
      </template>
      <template #itemSpec>
        UI
        <DynamicTable
          :table-config="showTableHead"
          :data="[]"
        ></DynamicTable>
      </template>
    </Elevator>
  </div>
</template>
<script>
import CodeEdit from "@/../local_modules/ZhiXinLib/components/CodeEdit"
import CodeHighlightjs from "@localModules/ZhiXinLib/components/CodeHighlightjs"
import DynamicTable from "@localModules/ZhiXinLib/element-components/dynamic-table/index"
import Elevator from "@localModules/ZhiXinLib/components/Elevator"
import {nav} from "@/views/utils/views/excel2Table/common";
import {TableConfig} from "@localModules/ZhiXinLib/element-components/dynamic-table/TableType";
import textUtils from "@localModules/ZhiXinLib/utils/textUtils";
import beautify from "js-beautify/js";
import typeOfUtils from "@localModules/ZhiXinLib/utils/type-of-utils";

export default {
  name: 'ElementUI',
  components: {CodeEdit, CodeHighlightjs, DynamicTable, Elevator},
  props: {
    tableCodeGenItems: Array
  },
  computed:{
    showTableHead() {
      return new TableConfig({}, eval(this.tableCode))
    }
  },
  watch: {
    tableCodeGenItems(val) {
      this.tableCode = this.tableHeadToJs(val, this.jsChangeResult);
      this.propCount = 0
    }
  },
  data(){
    return{
      propCount: 0,
      tableCode:'[]',
      activeNav: 'itemBaseInfo',
      nav,
      jsChangeResult: 'console.log("表头数组",tableHead)\n' +
        'console.log("默认结果",result)\n' +
        'return result',
    }
  },
  methods:{
    tableHeadToJs(tableHead,changeResult) {
      let result = '[\n'
      tableHead.forEach((item) => {
        result += this.tableHeadToJsItem(item)
      })
      result += ']'
      if(typeOfUtils.isNotEmpty(changeResult)){
        result=new Function('result','tableHead',changeResult)(result,tableHead)
      }
      const beautify1 = beautify(result, {indent_size: 2})
      return beautify1.replaceAll('\n\n', '\n').replaceAll('children: [{', 'children: [\n{')
    },
    tableHeadToJsItem(tableHeadItem) {
      let child = ''
      if (typeOfUtils.isNotEmpty(tableHeadItem.children)) {
        child = `\nchildren: ${this.tableHeadToJs(tableHeadItem.children)},`
      }
      let prop = ''
      if (typeOfUtils.isNotEmpty(tableHeadItem.prop)) {
        prop = `\nprop: '${tableHeadItem.prop}',`
      }
      let minWidth = ''
      if (typeOfUtils.isEmpty(child)) {
        if (typeOfUtils.isEmpty(tableHeadItem.prop)) {
          const number = this.propCount++;
          prop = `\nprop: 'genProp${number}',`
          tableHeadItem.prop = `'genProp${number}'`
        }
        minWidth = `\nminWidth:  '${textUtils.visualLength(tableHeadItem.label, '12px') + 16 * 2}',
      formatter: (row, column, cellValue, index) => {
  return cellValue
},`
      }
      return `\n{
label: '${tableHeadItem.label}',
'show-overflow-tooltip': true,
'header-align': 'center',
align:  'center',${minWidth}${prop}${child}
},\n`.replaceAll(" ","")
    },
    showValue(val) {
      this.activeNav = val
    },
    handleNavChange(val) {
      this.$refs.ElevatorRef.handleNavChange(val.name)
    }
  }
}
</script>
